<template>
	<view class="page" @click="handlePageClick">
		<view class="page">
			<!-- 返回按钮 -->
			<!-- 顶部导航 -->
			<view class="top">
				<view class="top-item">
					<image style="margin-top: -80px;" @click="returns()" src="/static/ret.png" alt="" />
					<view style="margin-top: -80px;">确认挂号信息</view>
				</view>
			</view>

			<!-- 就诊人信息 -->
			<view class="choose">
				<view class="rose">
					<view class="rose-name">{{ patientName }}</view>
					<view class="rose-choose" @click="choose">切换就诊人</view>
				</view>
				<view class="code">身份证号：{{ patientIdCard }}</view>
				<view class="code">就诊卡号：{{ patientCard }}</view>
			</view>

			<view class="message">
				<view class="name">
					<view class="name-left">就诊人</view>
					<view class="name-right">{{ patientName }}</view>
				</view>
				<view class="house">
					<view class="house-left">就诊科室</view>
					<view class="house-right">内科</view>
				</view>
				<view class="date">
					<view class="date-left">就诊日期</view>
					<view class="date-right">{{ todayDate }}</view>
				</view>
				<view class="doctor">
					<view class="doctor-left">就诊医生</view>
					<view class="doctor-right">{{ doctorName || '加载中...' }}</view>
				</view>
				<view class="local">
					<view class="local-left">就诊地点</view>
					<view class="local-right">门诊室一层201</view>
					<!-- 显示已录制音频 -->



				</view>
				<view style="margin-top: 10px;margin-left: 20px;" class="audio-player" v-if="uploadedAudioUrl">
					<audio ref="audioPlayer" :src="uploadedAudioUrl" controls autoplay title="录音播放" @play="onAudioPlay"
						@pause="onAudioPause" @ended="onAudioEnded"></audio>
				</view>

				<view class="line"></view>
				<view class="add">
					<view class="add-left" @click="imgadd">添加图片</view>
					<view class="lin"></view>
					<view class="add-right" @click="vioce">添加录音</view>
				</view>
				<!-- 显示已上传图片 -->
				<view style="display: flex;flex-wrap: nowrap;overflow: scroll;" v-if="selectedImages.length > 0"
					class="uploaded-images">
					<!-- 上传的图片列表 -->
					<view v-for="(image, index) in selectedImages" :key="index" class="image-item">
						<image :src="image" style="width: 90px; height: 90px; margin: 10px;" />
						<!-- 删除按钮 -->
						<view @click="deleteImage(index)" class="delete-btn">
							<image src="/static/del.png" alt="删除" style="width: 20px; height: 20px;" />
						</view>
					</view>
				</view>
				<!-- 文字描述文本域 -->
				<textarea v-model="text" placeholder="请输入文字描述" rows="5" cols="50"
					style="border: none; padding: 10px;"></textarea>
			</view>


			<!-- 录音功能 -->
			<view class="black" v-if="isRecordingVisible">
				<view class="tape_box" ref="tapeBox" v-if="isRecordingVisible" @click.stop>
					<view class="upload_box1">
						<!-- 添加关闭图标 -->
						<view class="" @click="closeRecording">
							<image src="/static/can.png" style="width: 30px;height: 30px;margin-left: 300px;"
								alt="关闭" />
						</view>
						<view class="upload_top">
							<view class="upload_img_title">录音</view>
						</view>
						<view class="tape_calculagraph">{{ formatTime }}</view>
						<view class="upload_pate_con">
							<!-- 点击录音按钮 -->
							<image @click="toggleRecording"
								:src="isRecording ? '/static/pause.png' : '/static/start.png'"
								style="width: 50px;height: 50px;">
							</image>
						</view>

						<view class="clear_tape" @click="clearRecording" v-if="recordingAvailable">
							清除录音
						</view>

						<!-- H5 平台的音频播放器 -->
						<view v-if="recordingAvailable" class="audio-player">
							<audio ref="h5Audio" :src="audioURL" controls autoplay title="录音" @play="onAudioPlay"
								@pause="onAudioPause" @ended="onAudioEnded"></audio>
						</view>
					</view>
				</view>
			</view>


			<!-- 底部按钮 -->
			<view class="footer" style="height:45px;line-height: 45px;">
				<view class="als">
					<view class="doc">医师服务费</view>
					<view class="money">￥20.00</view>
					<button
						style="background-color: #00DACA;font-size:15px; height: 30px;color: white;margin-left: 90px;line-height: 30px;margin-top: 5px;"
						@click="confirmSelection">确认</button>
				</view>
			</view>

			<!-- 切换就诊人 -->
			<view class="outerContainer" v-if="isChoosingPerson">
				<view class="choosePerson">
					<view class="al">
						<view class="titles">
							切换就诊人
						</view>
						<view style="margin-left: 75px;" class="error" @click="error">
							<image style="width: 20px;height: 20px;" src="/static/erroe.png" alt="" />
						</view>
					</view>

					<!-- 动态渲染就诊人信息 -->
					<view v-for="(child, index) in patientList" :key="index" @click="selectPatient(child)">
						<view class="names">{{ child.nickname }}</view>
						<view class="ids">就诊ID号：{{ child.code }}</view>
						<view class="linn"></view>
					</view>

					<view class="addd" @click="control">
						管理就诊人
					</view>
				</view>
			</view>

			<!-- 上传图片 -->
			<!-- 选择图片 -->
			<view class="black" v-if="isImgAdding">
				<view class="add-img">
					<form id="form">
						<view class="errorr">
							<image style="width: 30px;height: 30px;margin-left: 300px;margin-top: -10px;"
								src="/static/can.png" alt="" @click="errorr" />
						</view>
						<label>
							<image @click="selectImage()"
								style="width: 90px;height: 90px;margin-left: 20px;margin-top: -10px;" id="pic"
								:src="imageUrl || '/static/upload.png'" alt="上传" />
						</label>
					</form>
				</view>
			</view>

		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick
	} from 'vue';
	const isRecordingVisible = ref(false); // 控制录音功能的显示与隐藏
	const isRecording = ref(false); // 录音状态
	const time = ref(0); // 录音时间
	const tapeBox = ref(null); // 使用 ref 来定义引用
	const isImgAdding = ref(false); // 用来控制是否显示上传图片的组件
	const imageUrl = ref(''); // 用来存储上传的图片URL
	const audioUrl = ref(''); // 存储上传的录音 URL
	const uploadedAudioUrl = ref(''); // 用来存储上传的录音URL
	const id = ref(''); // 定义科室 ID
	// 定义响应式数据
	const isChoosingPerson = ref(false); // 控制是否显示选择就诊人弹窗
	const patientList = ref([]); // 存储就诊人列表


	// 定义状态变量，标记数据是否加载完成
	const isPatientDataLoaded = ref(false);
	// 在成功后，使用 nextTick 确保更新后的数据渲染到页面
	nextTick(() => {
		// 确保页面渲染了最新数据
		console.log('页面已更新');
	});

	// 处理页面点击事件
	function handlePageClick(event) {
		if (isRecordingVisible.value) {
			if (tapeBox.value && !tapeBox.value.contains(event.target)) {
				isRecordingVisible.value = false;
			}
		}
	}
	// 返回上一页
	const returns = () => {
		uni.reLaunch({
			url: '/pages/date/date'
		})
	}
	const formatTime = computed(() => {
		const minutes = String(Math.floor(time.value / 60)).padStart(2, '0');
		const seconds = String(time.value % 60).padStart(2, '0');
		return `${minutes}:${seconds}`; // 正确使用模板字符串
	});

	// 声明 receivedData 变量
	const receivedData = ref(null); // 初始化为 null
	const text = ref('');
	let timer = null;
	let recorderManager = null;
	let mediaRecorder = null;
	let audioChunks = [];
	let audioBlob = null;
	const recordingAvailable = ref(false);
	let audioURL = '';
	const pauseIconAvailable = ref(true); // 控制图标是否可见

	const todayDate = ref('');
	const patientName = ref('');
	const patientIdCard = ref('');
	const patientCard = ref('');
	const patientId = ref('');
	const doctorName = ref('');
	const receivedDate = ref('');

	onMounted(() => {
		const storedData = uni.getStorageSync('data');

		if (storedData) {
			const data = JSON.parse(storedData); // 解析 JSON 字符串为对象
			patientList.value = data.data.children; // 将获取到的就诊人信息存入 patientList
		} else {
			console.error("没有找到存储的用户数据！");
		}


		// 获取今天日期
		const currentDate = new Date();
		receivedDate.value =
			`${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`; // 正确使用模板字符串
		const date = new Date();
		todayDate.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

		const responseData = uni.getStorageSync('data');
		if (responseData) {
			let dataObj = null;
			try {
				dataObj = JSON.parse(responseData);
			} catch (e) {
				console.error('数据解析失败:', e);
			}

			if (dataObj && dataObj.data) {


				// 获取第一个 children 数据
				const children = dataObj.data.children;
				if (children && children.length > 0) {
					// 提取并更新身份证号和就诊卡号
					patientIdCard.value = children[0].code; // 更新身份证号
					patientCard.value = children[0].card; // 更新就诊卡号
					patientName.value = children[0].nickname;


				} else {
					console.log('没有找到有效的就诊人数据');
				}
			} else {
				console.log('没有有效的 data 数据');
			}
		} else {
			console.log('没有找到存储的 data');
		}

		// 获取存储的 doctor 数据
		const storedDoctorData = uni.getStorageSync('bookingData');
		console.log(storedDoctorData);
		if (storedDoctorData) {
			const doctorData = JSON.parse(storedDoctorData);
			if (doctorData && doctorData.doctor && doctorData.doctor.name) {
				doctorName.value = doctorData.doctor.name;
				receivedData.value = doctorData; // 给 receivedData 赋值
			}
		}

		initNativeRecorder();
	});
	// 切换就诊人弹窗显示
	function choose() {
		isChoosingPerson.value = !isChoosingPerson.value;
	}

	// 点击切换就诊人后更新页面
	function selectPatient(patient) {
		patientName.value = patient.nickname;
		patientIdCard.value = patient.code;
		patientCard.value = patient.card;
		isChoosingPerson.value = false; // 关闭切换就诊人弹窗
	}

	// 关闭弹窗

	// 初始化录音功能
	function initNativeRecorder() {
		recorderManager = uni.getRecorderManager();

		if (recorderManager) {
			recorderManager.onStart(() => console.log('开始录音'));
			recorderManager.onStop((res) => {
				console.log('录音已停止', res);
				isRecording.value = false;
				clearInterval(timer);
				time.value = 0;
				recordingAvailable.value = true;
				uploadedAudioUrl.value = res.tempFilePath; // 更新录音URL
				audioURL = uploadedAudioUrl.value; // 将 audioURL 更新为录音路径
			});

			recorderManager.onError((err) => {
				console.error('录音错误', err);
				isRecording.value = false;
				clearInterval(timer);
				time.value = 0;
				uni.showToast({
					title: '请获取录音权限',
					icon: 'none'
				});
			});
		} else {
			console.error('recorderManager 未初始化');
		}
	}
	// 删除图片
	function deleteImage(index) {
		// 从数组中移除图片
		selectedImages.value.splice(index, 1);
	}
	// 检查并请求录音权限
	function checkRecordingPermission() {
		uni.authorize({
			scope: 'scope.record',
			success() {
				startRecording();
			},
			fail() {
				uni.showModal({
					title: '权限请求',
					content: '录音功能需要您的授权，请开启录音权限。',
					showCancel: false,
					confirmText: '去设置',
					success(res) {
						if (res.confirm) {
							uni.openSetting({
								success: (settingRes) => {
									if (settingRes.authSetting['scope.record']) {
										startRecording();
									} else {
										uni.showToast({
											title: '未授权录音权限',
											icon: 'none'
										});
									}
								}
							});
						}
					}
				});
			}
		});
	}

	// 开始录音
	function startRecording() {
		if (isRecording.value || !recorderManager) return; // 确保 recorderManager 已初始化
		recorderManager.start({
			format: 'mp3'
		});
		isRecording.value = true;
		time.value = 0;
		timer = setInterval(() => {
			time.value++;
		}, 1000);
	}

	// 停止录音
	function stopRecording() {
		if (recorderManager) {
			recorderManager.stop();
		} else {
			console.error('recorderManager 未初始化');
		}
	}

	// 切换录音状态
	function toggleRecording() {
		if (isRecording.value) {
			stopRecording();
		} else {
			checkRecordingPermission(); // 检查权限并开始录音
		}
	}

	// 清除录音
	function clearRecording() {
		recordingAvailable.value = false;
		audioURL = '';
	}


	// 添加图片功能
	function imgadd() {
		if (imageUrl.value) {
			// 如果图片URL存在，则添加到 selectedImages 数组中
			selectedImages.value.push(imageUrl.value); // 使用 push 来添加新图片
			imageUrl.value = ''; // 清空临时图片URL
			isImgAdding.value = false; // 隐藏图片上传区域
		} else {
			// 如果没有图片，显示上传图片的区域
			isImgAdding.value = true;
		}
	}


	function control() {
		console.log(11);
		uni.reLaunch({
			url: '/pages/add/add'
		})
	}

	function vioce() {
		isRecordingVisible.value = !isRecordingVisible.value;
	}


	function error() {
		isChoosingPerson.value = false;
	}



	// 关闭录音框
	function closeRecording() {
		isRecordingVisible.value = false;
	}
	const selectedImages = ref([]); // 确保是一个数组
	// 定义 showImageDrawer
	const showImageDrawer = ref(false);
	// 从相册选择图片
	// 图片上传功能
	// 图片选择功能
	// 选择图片
	function selectImage() {
		uni.chooseImage({
			count: 1, // 选择1张图片
			success: (res) => {
				// 将选中的图片添加到数组中
				selectedImages.value = [...selectedImages.value, ...res.tempFilePaths];
			},
			fail: (err) => {
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				});
			}
		});
	}
	// 清除图片上传区域
	function errorr() {
		isImgAdding.value = false;
		imageUrl.value = ''; // 清空图片URL
	}


	// 通用上传函数
	const uploadFile = (url, filePath, name) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url,
				filePath,
				name,
				success: (res) => {
					try {

						const result = JSON.parse(res.data);
						if (result.code === 1) {
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
							resolve(result.data);
						} else {
							console.error('上传失败:', result.message);
							uni.showToast({
								title: result.message || '上传失败',
								icon: 'none'
							});
							reject(new Error(result.message));
						}
					} catch (parseError) {
						console.error('解析上传结果出错:', parseError);
						uni.showToast({
							title: '解析上传结果出错',
							icon: 'none'
						});
						reject(parseError);
					}
				},
				fail: (err) => {
					console.error('上传失败:', err);
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
					reject(err);
				}
			});
		});
	};
	// 上传图片
	const uploadImage = (imagePath) => {
		uploadFile('https://yiliao.kuxia.top/pc/Fileimg/file', imagePath, 'file');
	};

	// 点击确认按钮时执行的操作
	const confirmSelection = () => {
		// 这里先检查就诊人信息是否正确渲染
		nextTick(() => {
			console.log('Patient Name:', patientName.value); // 调试输出
			console.log('Patient ID:', patientId.value); // 调试输出
			// 只要 patientName 或 patientId 为空或为 undefined，就提示添加就诊人
			if (!patientName.value) {
				uni.showToast({
					title: '请先添加就诊人',
					icon: 'none'
				});
				return;
			}

			// 检查其他必要字段
			if (text.value !== '' && selectedImages.value.length > 0 && uploadedAudioUrl.value !== '') {
				if (!receivedData.value) {
					uni.showToast({
						title: '医生数据缺失',
						icon: 'none'
					});
					return;
				}

				// 进行预约请求
				uni.request({
					url: 'https://yiliao.kuxia.top/app/register/add',
					method: 'POST',
					data: {
						user_id: 2,
						card: 1230,
						depart_id: 3,
						doctor_id: 3,
						price: 20.00,
						trends: text.value,
						img: selectedImages.value,
						audio: uploadedAudioUrl.value,
						status: 1,
						create_time: receivedDate.value, // 使用 receivedDate
						time: 1,
						reset_content: '无'
					},
					success: (res) => {
						if (res.data && res.data.code === 200) {
							uni.showToast({
								title: '预约成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack(); // 返回上一页
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.message || '预约成功',
								icon: 'none'
							});
							uni.reLaunch({
								url: '/pages/success/success',
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求失败，请稍后再试',
							icon: 'none'
						});
						console.error('请求失败', err);
					}
				});
			} else if (text.value === '') {
				uni.showToast({
					title: '请填写文字描述',
					icon: 'none'
				});
			} else if (selectedImages.value.length === 0) {
				uni.showToast({
					title: '请选择图片',
					icon: 'none'
				});
			} else if (uploadedAudioUrl.value === '') {
				uni.showToast({
					title: '请录制音频',
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped>
	.uploaded-images {
		display: flex;
		flex-wrap: wrap;
	}

	.image-item {
		position: relative;
		/* 让删除按钮可以相对定位 */
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.delete-btn {
		margin-left: 86px;
		width: 35px;
		height: 35px;
		position: absolute;
		top: -1px;
		border-radius: 50%;
		/* 让删除按钮成为圆形 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
	}

	.tape_box {}



	#page-title {
		top: 0;
		font-size: 21px;
	}

	.upload_box1 {
		margin-left: -30px;
	}

	.tape_box {
		position: fixed;
		bottom: 0px;
		/* 这里改为50px */
		width: 100%;
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		text-align: center;
	}



	.upload_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.upload_img_title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	.tape_calculagraph {
		margin: 10px 0;
		font-size: 24px;
		font-weight: bold;
	}


	.upload_pate_con image {
		width: 50px;
		height: 50px;
		cursor: pointer;
	}

	.clear_tape {
		margin-top: 10px;
		font-size: 14px;
		color: red;
		cursor: pointer;
	}

	.audio-player {
		margin-top: 20px;
	}

	.audio-player audio {
		width: 100%;
		margin-top: 10px;
	}

	.top {
		background-color: #00daca;
		width: 100%;
		height: 12rem;
		color: white;
		font-size: 21px;
		line-height: 3rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}

	.top-item {
		display: flex;
		align-items: center;
	}

	.top-item image {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}

	/* 关闭图标样式 */
	.close-icon {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

	.close-icon image {
		width: 100%;
		height: 100%;
	}

	/* 切换就诊人 */
	.choose {
		width: 94%;
		margin-left: 3%;
		height: 100px;
		background-color: white;
		margin-top: -60px;
		border-radius: 10px;
		position: fixed;
	}

	.rose {
		margin-top: 20px;
		/* margin-left: 15px; */
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin-left: 5%;
	}

	.rose-choose {
		width: 80px;
		height: 30px;
		background-color: #00daca;
		font-size: 14px;
		color: white;
		text-align: center;
		border-radius: 5px;
		line-height: 30px;
	}

	.card {
		width: 92%;
		margin-left: 5%;
		color: #bababa;
	}

	.code {
		width: 92%;
		margin-left: 5%;
		color: #bababa;
		margin-top: 2px;
	}

	/* 就诊人信息 */
	.message {
		width: 94%;
		margin-left: 3%;
		background-color: white;
		margin-top: 55px;
		border-radius: 5px;
		position: fixed;
	}

	.add-left {
		font-size: 18px;
		margin-top: 5px;
	}

	.add-right {
		font-size: 18px;
		margin-top: 5px;
	}

	.lin {
		height: 60px;
		width: 1px;
		background-color: #d5d5d5;
		margin-top: -10px;
	}

	.name {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		margin-top: 15px;
		color: #6d6d6d;
	}

	.house {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		margin-top: 10px;
		color: #6d6d6d;
	}

	.date {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		margin-top: 10px;
		color: #6d6d6d;
	}

	.doctor {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		margin-top: 10px;
		color: #6d6d6d;
	}

	.local {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		margin-top: 10px;
		color: #6d6d6d;
	}

	.vioce {
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		margin-top: 10px;
		color: #6d6d6d;
	}

	.line {
		width: 100%;
		height: 0.5px;
		background-color: #d5d5d5;
		margin-top: 10px;
	}

	.add {
		display: flex;
		justify-content: space-between;
		width: 62%;
		margin-left: 20%;
		margin-top: 10px;
		color: #6d6d6d;
	}

	/* 切换就诊人 */
	.choosePerson {
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		width: 100%;
		height: auto;
		min-height: 200px;
	}

	.outerContainer {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		/* 黑色半透明背景 */
	}

	.titles {
		margin-left: 155px;
	}

	.al {
		display: flex;
		height: 50px;
		background-color: #00daca;
		text-align: center;
		color: white;
		line-height: 50px;
		font-size: 20px;
		font-weight: 500;
		display: flex;
	}

	.error {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background-color: white;
		margin-top: 14px;
		margin-left: 110px;
		display: flex;
		/* 使用 flexbox 使内容居中 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: center;
		/* 水平居中对齐 */
	}

	.error img {
		width: 16px;
		height: 16px;
	}

	/* 名字 */
	.names {
		color: black;
		font-size: 20px;
		color: #383838;
		margin-left: 15px;
		margin-top: 15px;
	}

	.ids {
		color: #747474;
		font-size: 15px;
		color: #676767;
		margin-left: 15px;
		margin-top: 2px;
	}

	/* 线 */
	.linn {
		width: 100%;
		height: 1px;
		background-color: #d5d5d5;
		margin-top: 15px;
	}

	/* 管理就诊人 */
	.addd {
		display: flex;
		justify-content: center;
		color: #00daca;
		font-size: 20px;
		margin-top: 15px;
		margin-bottom: 20px;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		padding: 10px;
	}

	.als {
		display: flex;
		margin-left: 25px;
		color: #383838;
	}

	.money {
		margin-left: 20px;
		color: orangered;
	}

	.confirm {
		width: 112px;
		height: 35px;
		background-color: #00daca;
		color: white;
		line-height: 35px;
		border-radius: 5px;
		text-align: center;
		font-size: 15px;
		margin-left: 120px;
		margin-top: 8px;
	}

	.controls {
		display: flex;
		/* align-items: center; */
		justify-content: center;
		gap: 20px;
		margin-left: -42px;
	}

	.recording-controls {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.btn {
		border: none;
		border-radius: 50%;
		padding: 20px;
		font-size: 18px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.btn:hover {
		background-color: #e65c00;
		/* 深橙色 */
	}

	.btn:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}



	.btn.btn-cancel {
		background: none;
		font-size: 15px;
		border: none;
		cursor: pointer;
		margin-top: 113px;
		padding: 0;
	}

	#timer {
		font-size: 15px;
		margin-top: 30px;
	}

	.btn.btn-upload {
		background: none;
		font-size: 12px;
		position: absolute;
		top: -12px;
		right: -12px;
		border: none;
		cursor: pointer;
	}

	audio {
		margin-top: 20px;
	}



	/* 外层的圆形 */
	.btn-wrapper {
		position: relative;
		display: inline-block;
	}

	/* 白色圆形的样式 */
	.btn-wrapper .btn-background {
		margin-top: 20px;
		position: absolute;
		top: -3px;
		left: -3.5px;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		background-color: white;
		border: 1px solid #ff6600;
		z-index: 0;
	}

	/* 橙色按钮的样式 */
	.btn.btn-recording {
		margin-top: 20px;
		background-color: #ff6600;
		color: white;
		width: 50px;
		height: 50px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
		/* 确保橙色按钮在白色圆形上层 */
	}

	.click {
		font-size: 14px;
		color: #3b3b3b;
		margin-top: 35px;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(167, 167, 167, 0.5);
		z-index: 1000;
		display: none;
	}

	.container {
		text-align: center;
		position: absolute;
		/* 确保容器定位在遮罩层上层 */
		bottom: 0;
		/* 距离底部为 0 */
		width: 100%;
		/* 使容器宽度适应屏幕 */
		z-index: 1010;
		/* 确保容器在遮罩层之上 */
		background-color: #ffffff;
		/* 可以设置背景颜色以增强对比度 */
		padding: 20px;
		/* 增加内边距以避免内容紧贴底部 */
		box-sizing: border-box;
		/* 确保内边距包含在宽度和高度中 */
		height: 30%;
	}

	/* 添加图片 */
	.black {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(167, 167, 167, 0.5);
		z-index: 1000;
	}

	.add-img {
		width: 100%;
		height: 20%;
		background-color: white;
		position: fixed;
		bottom: 0;
		/* 确保图片上传区域位于底部 */
	}


	/* 头像 */
	#form {
		margin-left: 20px;
		margin-top: 7%;
	}

	.uponld {
		width: 90px;
		height: 90px;
		overflow: hidden;
		object-fit: cover;
		margin-top: -20px;
	}

	.errorr img {
		width: 30px;
		height: 30px;
		margin-left: 350px;
		margin-top: -30px;
	}

	.new {
		height: 180px;
		overflow: hidden;
		overflow-y: scroll;
	}
</style>